[FWM303] Flutter でマルチプラットフォームを構築するワークショップに参加してきた #AWSreInvent

はじめに

CX事業本部 Delivery部 の田中孝明です。

Create a cross-platform Flutter application with AWS Amplify という ワークショップに参加してきました。

AppSync を使った Flutter のアプリケーションを AWS Amplify に構築するまでの手順を体験できました。

ワークショップについて

FWM303 | Create a cross-platform Flutter application with AWS Amplify

このワークショップでは、さまざまなコード ベースを維持するストレスを感じることなく、Android、iOS、Web などの複数のプラットフォーム向けにパフォーマンスの高いアプリケーションを構築する方法を学びます。 AWS Amplify および Flutter ライブラリを使用すると、クラウドに関する深い専門知識がなくても、機能が豊富なクラウド利用のアプリケーションを構築できます。 完全なクロスプラットフォーム アプリケーションを作成し、認証、API とデータのやり取り、メディア/ファイル ストレージなどの機能を追加する方法を学びます。 参加するにはラップトップを持参する必要があります。

ワークショップ

Flutter の開発環境を準備

Cloud 9 を使わないワークショップだったので、ここが一番時間がかかりました。 Flutter 自体は SDK のダウンロードとパスの追加で利用できるようになるのですが、現地の Wi-Fi でなかなか SDK のダウンロードが終わりませんでした。

Flutter アプリケーションを Amplify にデプロイ

Flutter アプリケーションをダウンロードし、指定のフォルダで amplify init を実行し Amplify プロジェクトの設定を行います。

Amplify Authenticator を使用してアプリに認証を追加する

amplify add auth コマンドで Amazon Cognito で認証できるように構築します。今回指定されたのはメールアドレスでの認証でした。

amplify push コマンドで認証用のリソースを追加します。

ここまで手順に従って Amplify にデプロイすると、ログイン画面が出てきます。ここまでで新規ユーザーの作成、作成したユーザーでのログインができるようになります。

ゲーム画面の作成

AppSync の API 作成、ゲームの UI 作成など、手順に従ってゲーム画面を作り込んでいきます。最終的には神経衰弱ゲームとして動作するところまで体験できます。

ゲーム終了画面などもなかなか手が込んでました。

まとめ

モバイルアプリ用のビルドまではワークショップで対応されていませんでしたが、Flutter で作られた Web のアプリケーションをゲームという形で動かせるように体験させてくれるワークショップでした。